<template>
  <div>
    <h1>咨询聊天</h1>

    <!-- 聊天消息列表 -->
    <div class="chat-messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <strong>{{ message.sender }}:</strong> {{ message.text }}
      </div>
    </div>

    <!-- 输入框 -->
    <div class="chat-input">
      <input type="text" v-model="newMessage" placeholder="输入新消息">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 聊天消息列表
      newMessage: '' // 新消息输入框内容
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage) {
        this.messages.push({
          id: Date.now(),
          sender: '用户',
          text: this.newMessage
        });
        this.newMessage = ''; // 清空输入框内容
      }
    }
  }
};
</script>

<style scoped>
/* 这里可以添加你的样式 */
.chat-messages {
  margin-bottom: 20px;
}

.message {
  margin-bottom: 10px;
}
</style>
